<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>妙蛙种子教育管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body>
<!--1  新增 和批量删除-->
<div class="layui-card-body" style="margin: 1px;">
    <div style="padding-bottom: 5px; margin-left: 20px">
        <button class="layui-btn layuiadmin-btn-SubInfo" data-type="batchdel">
            <i class="layui-icon  layui-icon-delete" ></i>批量删除</button>
        <button class="layui-btn layuiadmin-btn-SubInfo" data-type="add">
            <i class="layui-icon  layui-icon-add-circle" ></i>添加</button>
    </div>
</div>
<!--表格  利用layui 给表格渲染数据  layui   lay-filter事件-->
<table id="table-SubInfo" lay-filter="filter-SubInfo"></table>
<!--内置按钮-->
<script type="text/html" id="table-rows-SubInfo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--编辑  修改 和 新增-->
<div class="layui-form " id="SubInfoForm" lay-filter="filter-SubInfoForm"
      style="display: none;margin-left: 1%">
    <!--或者<form class="layui-form" action="">   readonly="readonly"-->
    <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" name="subId" autocomplete="off" class="layui-input" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="subName" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <div class="layui-input-block">
            <a href="javascript:;">
                <img  name="subIcon" src="../img/shuxue.png" class="layui-nav-img">
            </a>
        </div>
    </div>

    <div class="layui-form-item  layui-hide">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="fromSubmitSubInfo"
                    id="form-SubInfo-submit">修改</button>
        </div>
    </div>
    <div class="layui-form-item  layui-hide">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="fromSubmitSubInfo2"
                    id="form-SubInfo-submit2">添加</button>
        </div>
    </div>
</div>

</body>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-1.8.2.js"></script>
<script>
    //layui使用方式
    //加载要使用模块
    layui.use(['element', 'table','form','laydate','layer'], function() {
        var table=layui.table,//表格
            form=layui.form,//表单
            layer=layui.layer//弹框

        //表数据渲染   向后台请求数据  加载表格
        table.render({
            elem: '#table-SubInfo' //那个table的id  渲染表格
            ,url: '/findAllSub' //  这是一个 get请求 查询所有科目信息
            ,cellMinWidth: 50
            ,cols: [[ //解析json数据
                {
                    type: 'checkbox'
                }, {
                    field: 'subId',title: 'ID',sort: true
                }, {
                    field: 'subName',title: '科目名称'
                }, {
                    field: 'subIcon',title: '科目图标'
                }, {
                    title: '操作',align: 'center',fixed: 'right'
                    ,toolbar: '#table-rows-SubInfo'//内置按钮的id  编辑 删除
                }
            ]
            ]
            ,dataType:'json'
            ,page: true //是否开启分页
            ,limit: 6 //每页显示的条数   请求
            ,limits: [6, 10, 20] // 选择分页的显示条数
            ,height: 'full-200'
            ,text: '对不起，加载出现异常,请刷新试试。'
        });



        //监听表格的内置 按钮（修改 删除）
        table.on('tool(filter-SubInfo)', function(obj) {//obj.event  这一行数据 ob.data
            console.log(obj.data); //当前行的数据
            console.log(obj.data.name); //当前行的数据
            console.log(obj.event); //当前点击事件的名称

            if(obj.event=="edit"){//打开 弹窗 内容时 编辑form

                //当前行的数赋值到表单中
                form.val("filter-SubInfoForm",obj.data);
                //打开一个弹框
                layer.open({
                    type: 1//类型 1：页面层 2：iframe层  content: 'http://sentsin.com'
                    , title: '编辑科目信息'//标题
                    , area: ['400px', '300px']//弹出框的宽高
                    , shade: 0.2//遮罩的透明度 0:为没有
                    , maxmin: true//是否有最大化
                    , offset: [ 100, 200  ]//坐标
                    , content: $("#SubInfoForm")
                    , btn: ['修改'] //页面按钮  可以是多个['修改',’删除’,’关闭’]
                    , btnAlign: 'c' //按钮居中
                    , yes: function (index, layero) {
                        console.log("点击了修改按钮");
                        //触发表单提交的按钮事件
                        $("#form-SubInfo-submit").trigger("click");
                        console.log("");
                        //当前页面刷新
                        //关闭当前弹框
                        layer.close(index);
                    }
                });
            }else if(obj.event=="delete"){

                layer.confirm('真的删除这行数据么？', function(index) {
                    //ajax请求后台servlet删除成功后
                    $.ajax({
                        type: "GET",
                        url: "/delSub",
                        data: {"id": obj.data.subId},
                        //返回的数据类型
                        dataType: "json",
                        success: function(data){
                            if(data.code==0){
                                layer.alert("删除成功");
                            }else{
                                layer.alert("删除失败");
                            }
                        },
                        error: function(data){
                            console.log("code",data.code);
                            console.log("msg",data.msg);
                            location.reload(true);
                        }
                    });
                    obj.del(); //在表格内移除
                    layer.close(index); //关闭提示窗口
                    /////////////////
                });

            }
        });

        //修改表单监控（修改）
        form.on('submit(fromSubmitSubInfo)', function(data) {
            var field = data.field; //获取提交的字段
            console.log(field);
            $.ajax({
                type: "POST",
                url: "/updSub",
                data: JSON.stringify(field),
                //浏览器发送给服务器的数据类型
                contentType: "application/json",
                //浏览器希望的返回值类型
                dataType : "json",
                success: function (data)
                {
                    if(data.code==0){
                        layer.alert("修改成功");
                        table.reload("table-SubInfo");//id
                    }else{
                        layer.alert("修改失败");
                    }
                },
                error:function (data) {
                    console.log("code",data.code);
                    console.log("msg",data.msg);
                    location.reload(true);
                }
            });
        });
        //添加
        //解析data-type的值,绑定对应的事件
        $('.layuiadmin-btn-SubInfo').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //添加,批量删除按钮事件
        var active = {
            batchdel: function () {
                console.log("批量删除");
                //layui  方式
                var checkStatus = table.checkStatus('table-SubInfo'),
                    checkData = checkStatus.data;//选中的数据
                if(checkData.length>0){
                    //可以批量删除

                    //直接删除
                    var idArr="";
                    $.each(checkData,function(i,obj){
                        idArr+=obj.id+",";

                    });
                    $.post("../batchDelStudentInformationServlet", {"idArr":idArr},
                        function(data){
                            if(data.code==0){
                                layer.alert("删除成功");
                                table.reload("table-SubInfo");//id
                            }else{
                                layer.alert("删除失败");
                            }
                        },"json");//text

                    console.log(idArr);//id  后台

                }else{
                    layer.alert("请选中要删除的数据!!")
                }

                console.log(checkData.length);

            },
            //添加
            add: function () {

                //重置表单
                form.val("filter-SubInfoForm", {
                    "subId": ""
                    ,"subName": ""
                    ,"subIcon": ""
                });
                layui.form.render();
                layer.open({
                    type: 1,
                    title: "科目详情",
                    area: ['400px', '300px'],
                    btn: ['添加'], //弹出框的宽高
                    content: $("#SubInfoForm"), //这里content是一个普通的String
                    //content: $('#id') //这里DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    yes: function(index, layero){
                        //触发表单提交
                        $("#form-SubInfo-submit2").trigger('click');
                        //关闭弹窗
                        layer.close(index);
                    }
                });
            }
        };
        form.on('submit(fromSubmitSubInfo2)', function(data) {//  新增和修改 都这跳到这里
            var field = data.field; //获取提交的字段

            $.ajax({
                type: "POST",
                url: "/addSub",
                data: JSON.stringify(field),
                //浏览器发送给服务器的数据类型
                contentType: "application/json",
                //浏览器希望的返回值类型
                dataType : "json",
                success: function (data)
                {
                    if(data.code==0){
                        layer.alert("添加成功");
                        table.reload("table-SubInfo");//id
                    }else{
                        layer.alert("添加失败");
                    }
                },
                error:function (data) {
                    console.log("code",data.code);
                    console.log("msg",data.msg);
                    location.reload(true);
                }
            });
        });
    });

</script>
</html>